<template>
  <div class="container">
    <div class="title">食用农产品快检数据公示</div>
    <dv-scroll-board :config="config" class="body"></dv-scroll-board>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { getHsDYNCPGSByHsAJZ } from "@/api";
import DvScrollBoard from "@components/scrollBoard/index.vue";
let d = new Date();
const year = ref(d.getFullYear());
const data = ref<any[]>([]);
const config = reactive({
  header: [
    "市场名称",
    "经营户",
    "商品名称",
    "检测项目",
    "检测结果",
    "检测时间",
  ],
  headerBGC: "none",
  oddRowBGC: "rgba(118, 191, 253, 0.1)",
  evenRowBGC: "transparent",
  columnWidth: ["110", "110", "110", "110", "110", "110"],
  data: [],
  align: ["center", "center", "center", "center", "center", "center"],
});
const initData = async () => {
  const { data: arr } = await getHsDYNCPGSByHsAJZ();
  data.value = [];
  arr.forEach((item: any) => {
    let arr: any[] = [];
    arr[0] = item.jdname;
    arr[1] = item.lianxir;
    arr[2] = item.ypmc;
    arr[3] = item.jcxm;
    arr[4] = `<span style="color:#1AED83;">${item.jcjg}</span>`;
    arr[5] = item.jcshij;
    data.value.push(arr);
  });
  config.data = data.value as any;
};
onMounted(async () => {
  await initData();
});
</script>
<style lang="scss" scoped>
.container {
  min-height: 0px;
  width: 100%;
  height: 100%;
  background-image: url("../../assets/组 7704.png");
  background-size: cover;
  border: 1px solid #172f7e;
  display: flex;
  flex-direction: column;
  .title {
    width: 100%;
    height: 31px;
    font-size: 20px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    padding-top: 3px;
    flex: 0 0 auto;
  }
  .body {
    flex-grow: 1;
  }
}
</style>
